<template>
  <div class="searchHeader">
    <form action="/">
      <van-search
        v-model="queryText"
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      >
        <template #left-icon>
          <div class="iconfont searchIcon"> &#xe628; </div>
        </template>
      </van-search>
    </form>
  </div>
</template>

<script>
// import { Toast } from 'vant'
export default {
  name: 'SearchHeader',
  props: ['query'],
  data() {
    return {
      queryText: this.query
    }
  },
  methods: {
    onSearch(val) {
      this.$emit('submitSearch', this.queryText, true)
    },
    onCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>

</style>
